<template>
  <view class="plat">
    <scroll-view
      id="tab-bar"
      class="scroll-h"
      :scroll-x="true"
      :show-scrollbar="false"
      :scroll-into-view="scrollInto"
      style="overflow: auto hidden;"
    >
      <view class="uni-tab-item" id="1" data-current="all" @click="ontabtap">
        <text
          class="uni-tab-item-title"
          :class="tabIndex == index ? 'uni-tab-item-title-active' : ''"
        >全部</text>
      </view>
      <view
        v-for="(tab, index) in tabBars"
        :key="tab.platform_id"
        class="uni-tab-item"
        :id="tab.platform_id"
        :data-current="index"
        @click="ontabtap"
      >
        <text
          class="uni-tab-item-title"
          :class="tabIndex == index ? 'uni-tab-item-title-active' : ''"
        >{{ tab.platform_name }}</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 直播平台
      tabBars: []
    };
  },
  mounted() {
    const tabs = uni.getStorageSync('tabBars')
    if(tabs){
      this.tabBars = tabs
    }else{
      this.getPlatForm()
    }
  },
  methods: {
    getPlatForm() {
      this.$http({
        url: "/api/platform/lists"
      }).then(res => {
        this.tabBars = res.data;
        uni.setStorageSync("tabBars", res.data);
      });
    }
  }
};
</script>

<style lang='scss' scoped>
.scroll-h {
  width: 750rpx;
  height: 80rpx;
  flex-direction: row;
  /* #ifndef APP-PLUS */
  white-space: nowrap;
  /* #endif */
  /* flex-wrap: nowrap; */
  /* border-color: #cccccc;
		border-bottom-style: solid;
		border-bottom-width: 1px; */
}
.uni-tab-item {
  /* #ifndef APP-PLUS */
  display: inline-block;
  /* #endif */
  flex-wrap: nowrap;
  padding-left: 15rpx;
  padding-right: 15rpx;
  text {
    border: 1px solid #cccccc;
    padding: 2rpx 15px;
    border-radius: 100px;
  }
  .uni-tab-item-title-active {
    color: #ffffff;
    background-color: #ed9f26;
    border: 1px solid #ed9f26;
  }
}

.uni-tab-item-title {
  color: #555;
  font-size: 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  flex-wrap: nowrap;
  /* #ifndef APP-PLUS */
  white-space: nowrap;
  /* #endif */
}
</style>